<html>
<head>
    <title>jQuery Mask Demo</title>
    <style>
body { font-size: 11pt; }
#top { font-size: 1.2em; }
.box {
    margin: 0px 5px;
    padding: 5px;
    border: 1px dotted black;
}
#main { height: 22em }
#main, input, select, button { font-size: 12px; }
.select {
    color: #666;
    font-style: italic;
    float: right;
    font-size: 10pt;
}
#red {
    width: 90;
    height: 70;
    background: red;
    padding: 15px;
}
#yellow {
    width: 200;
    height: 200;
    background: yellow;
    margin: 10px
}
.masked { overflow: hidden; }
    </style>
<!-- overflow:hidden in IE is currently breaking mask calcs :( -->
<!--[if IE]>
    <style type="text/css">
.masked { overflow: visible; }
    </style>
<![endif]-->
    <script type="text/javascript" src="../../jquery.1.4.2.js"></script>
    <script type="text/javascript" src="../measure/jquery.measure.js"></script>
    <script type="text/javascript" src="jquery.mask.js"></script>
    <script type="text/javascript" src="../../trunk/jquery.values.js"></script>
    <script type="text/javascript" src="../log/log.js"></script>
    <script type="text/javascript">
$(function() {
    $('#toggle').click(function() {
        var opts = $.values();
        // correct the values
        for (var k in opts) {
            if (opts[k] == '') delete opts[k];
            else if (opts[k] == 'false') opts[k] = false;
        }
        // toggle away!
        if (opts.select) {
            $(opts.select).mask(opts);
        } else {
            $.mask(opts);
        }
    });
    // don't lock up the demo
    $(document).bind('maskStart', function(e, opts) {
        var $target = $(e.target);
        if (opts.page || $target.is('#main')) {
            setTimeout(function() {
                if ($target.data('mask')) {
                    $target.mask(false);
                    log("Cancelled mask to unblock demo!");
                }
            }, 15000);
        }
    });
});
    </script>
</head>
<body>
<div id="top" class="box">
    <span class="select">#top.box</span>
    <span title="More options are available than shown too">Defaults are shown.</span>
    Tweak the settings and toggle away!<br>
    View the source code to see how little effort this takes on your part. :)
</div>
<br clear="all">
<div id="main" class="box">
    <span class="select">#main.box</span>
    <label for="select"></label>
    $('<select name="select" title="The empty option calls $.mask() instead.">
        <option></option>
        <option>#red</option>
        <option>#yellow</option>
        <option>#main</option>
        <option>#top</option>
        <option>.box</option>
        <option>.fill</option>
        <option>div</option>
    </select>').mask({
    <label for="block">block:</label>
    <select name="block">
        <option>true</option>
        <option>false</option>
    </select>,
    <label for="resize">resize:</label>
    <select name="resize">
        <option>true</option>
        <option>false</option>
    </select>})
    <button id="toggle">Toggle</button>
    <div id="yellow" class="fill">
        <span class="select">#yellow.fill</span>
        <div id="red" class="fill">
            <span class="select">#red.fill</span>
        </div>
    </div>
</div>
</body>
</html>